@charset "utf-8";
@import "common/reset.scss";
@function r($px){
    @return $px/40+rem;
}

@function p($px){
    @return $px/2+px;
}
*{
    margin: 0;
    padding: 0;
}
html , body{
    height: 100%;
}
.web{
    background-image: url(../img/bodybeijing.png);
    width: 100%;
    height: 100%;
    header{
        background-color: white;
        .top_nav{
            width: 100%;
            height: r(88);
            display: flex;
            align-items: center;
            .top_nav_img{
                width: r(40);
                height: r(40);
                margin-left: 10%;
                img{
                    width: 100%;
                }
            }
            .top_nav_search{
                width: r(420);
                height: r(50);
                border: r(2) solid #241f47;
                border-radius: r(20);
                margin: 0 auto;
                display: flex;
                justify-content: center;
                align-items: center;
                input{
                    background-image: url(../img/fdj.png);
                    background-repeat: no-repeat;
                    background-size: r(35);
                    background-position: 35%, 50%;
                    width: r(380);
                    border: none;
                    text-align: center;
                    &:focus{
                        background-image: none;
                    }
                }
                input::-ms-input-placeholder{
                    text-align: center;
                }
                input::-webkit-input-placeholder{
                    text-align: center;
                }
                input:focus::-ms-input-placeholder{
                    font-size: 0;
                }
                input:focus::-webkit-input-placeholder{
                    font-size: 0;
                }
                input:focus::-moz-placeholder{
                    font-size: 0;
                }
            }
        }
    }
    section{
        .swiper-container{
            width: 100%;
            .swiper-wrapper{
                div{
                    img{
                        width: 100%;
                    }
                }
            }
        }
        .xilie{
            width: 90%;
            background-color: white;
            margin: r(30) auto;
            overflow: hidden;
            display: flex;
            .xilie_img{
                width: r(1);
                flex-grow: 6;
                img{
                    width: 100%;
                }
            }
            .xilie_test{
                width: r(1);
                float: left;
                flex-grow: 4;
                background-color: white;
                display: flex;
                justify-content: center;
                align-items: center;
                .xilie_test_img{
                    width: 70%;
                    height: 30%;
                    background-image: url(../img/xilie.png);
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    p{
                        color: white;
                        font-size: 100%;
                    }
                }
            }
        }
    }
    footer{
        position: fixed;
        bottom: 0;
        width: 100%;
        height: p(100);
        border-top: p(2) solid #241f47;
        background: url(../img/footerBg.jpg);
        ul{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            li{
                width: p(100);
                height: p(70);
                text-align: center;
                >a{
                    display: inline-block;
                    width: p(46);
                    height: p(48);
                    overflow: hidden;
                    position: relative;
                    font-size: 0;
                    img{
                        width: 100%;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%,-50%);
                    }
                }
                p{
                    font-size: p(24);
                    a{
                       color: black; 
                    }
                }
                //改变尾部字体颜色
                &:nth-of-type(1){
                    p{
                        a{
                            color: #fade5d;
                        }
                    }
                }
            }
        }
    }
}
